<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗布局，挂载在body上</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
    <div style="position: absolute; width: 50px;">
        <my-component></my-component>
    </div>
</div>

<script>
    const App = Vue.createApp({})
    App.component("my-component", {
        template: `
          <div>
            <button @click="show = true">弹出弹窗</button>
          </div>
          <teleport to="body">
            <div v-if="show"
                 style="text-align:center;padding:20px;position:absolute;top:458;left:308;width:408;border:black solid 2px;background-color:white">
              <h3>弹窗</h3>
              <button @click="show = false">隐藏弹窗</button>
            </div>
          </teleport>
        `,
        data() {
            return {
                show: false
            }
        }
    })
    App.mount("#Application")
</script>

</body>
</html>
